<template>
  <div class="box">
    <h5>个人简介</h5>
    <p class="star">{{artdesc}}</p>
    <h5>{{otherdesc[0].ti}}</h5>
    <p>{{otherdesc[0].txt}}</p>
    <h5>{{otherdesc[1].ti}}</h5>
    <p v-html="otherdesc[1].txt"></p>
    <h5>{{otherdesc[2].ti}}</h5>
    <p v-html="otherdesc[2].txt"></p>
    <h5>{{otherdesc[3].ti}}</h5>
    <p v-html="otherdesc[3].txt"></p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      artID: 0,
      artdesc: '',
      otherdesc: [],
      nowpage: 1
    }
  },
  created () {
    this.getArtInfo()
  },
  methods: {
    // 获取个人简介
    async getArtInfo () {
      this.artID = this.$route.query.id;
      let res = await axios.get('https://autumnfish.cn//artist/desc?id=' + this.artID)
      // console.log(res)
      this.artdesc = res.data.briefDesc
      this.otherdesc = res.data.introduction
      // /n innerhtml识别不了，所以用<br>替换
      this.otherdesc[1].txt = res.data.introduction[1].txt.replace(/\n/g, '<br>')
      this.otherdesc[2].txt = res.data.introduction[2].txt.replace(/\n/g, '<br>')
      this.otherdesc[3].txt = res.data.introduction[3].txt.replace(/\n/g, '<br>')
    }
  }
}
</script>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
}
.box {
  p {
    font-size: 12px;
    color: #666;
    line-height: 25px;
  }
  .star {
    text-indent: 2em;
  }
}
</style>
